<template>
	<view class="user-agreement">
    <view class="checkbox" :class="[read && 'checked']" @tap="checkboxChange(!read)">
      <u-icon
        v-if="read"
        class="u-checkbox__icon-wrap__icon"
        name="checkbox-mark"
        size="12"
        color="#ffffff"
      />
    </view>
    <view @click="toRead">《用户服务协议》</view>
  </view>
</template>

<script>
	export default {
    props: {
      read: {
        default: false,
        type: Boolean
      }
    },
		data() {
			return {
        show: false
			};
		},
    methods: {
      checkboxChange(e) {
        this.$emit('update:read', e)
      },
      toRead() {
        uni.navigateTo({ url: '/user-pages/UserLayout/userAgreement/userAgreement' })
      },
    }
	};
</script>

<style scoped lang="scss">
.user-agreement {
  position: absolute;
  bottom: 100rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  color: var(--c-emphasize-primary-color);

  .checkbox {
    border-color: var(--c-emphasize-primary-color);
    width: 18px;
    height: 18px;
    border-radius: 3px;
    box-sizing: border-box;
    transition-property: border-color, background-color, color;
    transition-duration: 0.2s;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-right: 6px;
    font-size: 6px;
    border-width: 1px;
    border-style: solid;
    color: transparent;
  }
  .checked {
    background: var(--c-emphasize-primary-color);
  }
}
</style>
